<template>
  <div>
    <header class="in-banner bg-orange">
      <div class="bg-333 hei40">
        <div class="container">
          <div class="pull-left mar-t8"><span class="ft-ochre"><a href="#">数字后勤服务大厅</a></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
            class="ft-grey8"><a href="#">运驾中心</a>&nbsp;&nbsp;-&nbsp;&nbsp;<a
            href="#">服务监督</a>&nbsp;&nbsp;-&nbsp;&nbsp;<a href="#">网络报修</a></span></div>
          <!--user login-->
          <div class="user-box user-txt pull-right mar-t8">
            <div class="b-login hidden"><!--未登录-->
              <i></i>
              <a href="#">登录</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="#">注册</a>
            </div>
            <div class="a-login"><!--已登录-->
              <i class="on"><img src="../../static/img/temp03.jpg" width="24" height="24" class="img-circle-3"></i>
              <a href="#">Chenshangcai</a>
            </div>
          </div>
          <!--/user-->
        </div>
      </div>

      <div class="container hei90">
        <!--logo-->
        <div class="logo pull-left mar-t15"></div>
        <!--search-->
        <div class="search pull-right mar-t30 mar-l20">
          <div class="input-group">
            <input type="text" class="form-control" value="搜索商家/美食">
            <span class="input-group-btn">
						<button class="btn" type="button"><img src="../../static/img/search.png" width="18" height="18"
                                                   alt=""/></button>
					</span>
          </div>
        </div>
        <!--/search-->
        <!--.menu-->
        <div class="pull-right">
          <nav class="pull-left mar-t30" role="navigation">
            <ul class="nav-menu nav-menu-tabs">
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">餐厅介绍</a>
              </li>
              <li><a href="#">推荐菜品</a></li>
              <li><a href="#">我的订单</a></li>
            </ul>
          </nav>
          <div class="pull-left s-cart mar-t30"><i></i><span class="pull-left">购物车</span> <em>12</em></div>
        </div>
        <!--/menu-->
      </div>
    </header>
    <div class="container1060 mar-t30">
      <div class="ft18 fl">订单记录</div>
      <div class="dropdown fr">
        <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">近三个月订单 <span
          class="caret"></span></button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">近半个月订单</a>
          </li>
          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">近10天订单</a>
          </li>
          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">一周内容订单</a>
          </li>
          <li role="presentation" class="divider"></li>
          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">近3天订单</a>
          </li>
        </ul>
      </div>
      <p class="clearfix"></p>
      <table class="table table-hover mar-t10">
        <thead class="bg-white">
        <tr class="ft-grey9 ft12">
          <th>下单时间</th>
          <th>订单详情</th>
          <th>收货人</th>
          <th>金额</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody class="mar-t10 bg-white">
        <!--list01-->
<!--       <div class="order-record" >-->




          <template v-for="item in orderRecord.records">
          <tr>
            <td class="text-center">
<!--              <p>今天</p>-->
              <p class="ft12 ft-grey9">{{item.orderDate}}</p>
            </td>
            <td>
              <p class="ft12 ft-grey9 mar-b8">订单号: {{item.orderNum}}</p>
              <img :src="item.foodPhoto" width="50" height="50" class="img-circle-3 fl"/>
              <div class="fl mar-l20">
                <p class="ft-bold600">{{item.storeName}}</p>
                <p class="ft12 ft-grey8" v-for="food in item.foodsData.foods">{{food.foodDesc}}</p>
              </div>
            </td>
            <td>{{item.receiveName}}</td>
            <td>
              <p class="ft-bold600">{{item.price}}</p>
              <p class="ft12 ft-grey8">微信支付</p>
            </td>
            <td>{{item.state==0?'待付款':item.state==1?'已付款':item.state==2?
              '商家接单':item.state==3?'派送中':item.state==4?'已取消':item.state==5?
              '已取消':item.state==6?'制作完成等待配送':item.state==7?'商家不接单':'配送员驳回'}}</td>
            <td>
              <p class="ft12"><a @click="commentOpen(item.orderNum)">评价</a></p>
              <p>
                <button type="button" class="btn btn-default ft12">再来一份</button>
              </p>
            </td>
          </tr>
          <tr id="demo" class="collapse food" :orderNum="item.orderNum">
            <td colspan="2" style="padding: 0; margin: 0;">
              <div class="shopping-cart">
                <div class="order-list">
                  <ul>
                    <li class="clearfix">
                      <div class="fl na ft12">菜品</div>
                      <div class="fl modify">份数</div>
                      <div class="fr pri" style="width: 80px">小计（元）</div>
                    </li>
                    <li class="clearfix" v-for="food in item.foodsData.foods">
                      <div class="fl na" title="精品秘制茄子盖">{{food.foodName}}</div>
                      <div class="fl modify clearfix">{{food.count}}</div>
                      <div class="fr pri"><span>¥{{food.price}}</span></div>
                    </li>
<!--                    <li class="clearfix">-->
<!--                      <div class="fl na" title="精品秘制茄子盖">精品秘制茄子盖</div>-->
<!--                      <div class="fl modify clearfix">1</div>-->
<!--                      <div class="fr pri"><span>¥16</span></div>-->
<!--                    </li>-->
                  </ul>

                  <div class="other-charge">
                    <div class="clearfix packing-cost">
                      <span class="fl">包装盒</span>
                      <span class="fr boxtotalprice">¥{{item.foodsData.packCost}}</span>
                    </div>
                    <div class="clearfix delivery-cost">
                      <span class="fl">配送费(不计入起送价)</span>
                      <span class="fr shippingfee">¥{{item.foodsData.deliveryCost}}</span>
                    </div>
                  </div>
                  <div class="total">共<span class="totalnumber">{{item.foodsData.foods.length}}</span>份，共计<span class="bill fr">¥{{item.price}}</span></div>
                </div>
              </div>
            </td>
            <td colspan="4" class="border-l bg-grey">
              <div class="pad20" style="padding-left: 5%;">
                <p class="ft-orange">系统于15:46取消订单, 取消理由: 超时未支付</p>
                <p class="ft-bold600 mar-t10">配送信息</p>
                <div class="ft-grey8 line-hei-18">
                  <p>配送方式： {{item.dispatching}}提供配送服务</p>
                  <p>送达时间： 尽快送出</p>
                  <p>联 系 人： {{item.receiveName}}</p>
                  <p>联系电话： {{item.phone}}</p>
                  <p>收货地址： {{item.address}}</p>
                  <p>备 注： {{item.remarks!=""?item.remarks:"无备注"}}</p>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="6" style="padding: 0; margin: 0;">
              <div   class="ft12 bg-grey btn-fold center-block" data-toggle="collapse" data-target="#demo">
                <p class="icon-down" @click="displayFood(item.orderNum,$event)" >显示订单详情&nbsp; &nbsp;<img src="../../static/img/icon-up01.png" width="9" height="6"
                                                            alt=""/></p>
                <p class="icon-up" style="display: none" @click="hiddenFood(item.orderNum,$event)">收起&nbsp;&nbsp;<img src="../../static/img/icon-down.png" width="9"
                                                                            height="6" alt=""/></p>
              </div>
            </td>
          </tr>
          </template>
        <!--list02-->

        <!--list03-->
<!--        <tr>-->
<!--          <td class="text-center">-->
<!--            <p>2017-11-19</p>-->
<!--            <p class="ft12 ft-grey9">09:20</p>-->
<!--          </td>-->
<!--          <td>-->
<!--            <p class="ft12 ft-grey9 mar-b8">订单号: 3015598039457319997</p>-->
<!--            <img src="../../static/img/img-temp01.png" width="50" height="50" class="img-circle-3 fl"/>-->
<!--            <div class="fl mar-l20">-->
<!--              <p class="ft-bold600">禾丰楼餐厅</p>-->
<!--              <p class="ft12 ft-grey8">五折单人套餐：汉堡+辣翅+4串雪花+中可</p>-->
<!--            </div>-->
<!--          </td>-->
<!--          <td>陈 先生</td>-->
<!--          <td>-->
<!--            <p class="ft-bold600">55.50</p>-->
<!--            <p class="ft12 ft-grey8">微信支付</p>-->
<!--          </td>-->
<!--          <td>订单已取消</td>-->
<!--          <td>-->
<!--            <p class="ft12"><a href="#">评价</a></p>-->
<!--            <p>-->
<!--              <button type="button" class="btn btn-default ft12">再来一份</button>-->
<!--            </p>-->
<!--          </td>-->
<!--        </tr>-->
<!--        <tr id="demo-2" class="collapse">-->
<!--          <td colspan="2" style="padding: 0; margin: 0;">-->
<!--            <div class="shopping-cart">-->
<!--              <div class="order-list">-->
<!--                <ul>-->
<!--                  <li class="clearfix">-->
<!--                    <div class="fl na clearfix">菜品</div>-->
<!--                    <div class="fl modify clearfix">份数</div>-->
<!--                    <div class="fr pri" style="width: 80px">小计（元）</div>-->
<!--                  </li>-->
<!--                  <li class="clearfix">-->
<!--                    <div class="fl na clearfix" title="精品秘制茄子盖">精品秘制茄子盖</div>-->
<!--                    <div class="fl modify clearfix">1</div>-->
<!--                    <div class="fr pri"><span>¥16</span></div>-->
<!--                  </li>-->
<!--                  <li class="clearfix">-->
<!--                    <div class="fl na clearfix" title="精品秘制茄子盖">精品秘制茄子盖</div>-->
<!--                    <div class="fl modify clearfix">1</div>-->
<!--                    <div class="fr pri"><span>¥16</span></div>-->
<!--                  </li>-->
<!--                </ul>-->

<!--                <div class="other-charge">-->
<!--                  <div class="clearfix packing-cost">-->
<!--                    <span class="fl">包装盒</span>-->
<!--                    <span class="fr boxtotalprice">¥1</span>-->
<!--                  </div>-->
<!--                  <div class="clearfix delivery-cost">-->
<!--                    <span class="fl">配送费(不计入起送价)</span>-->
<!--                    <span class="fr shippingfee">¥0</span>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div class="total">共<span class="totalnumber">1</span>份，共计<span class="bill fr">¥17</span></div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </td>-->
<!--          <td colspan="4" class="border-l bg-grey">-->
<!--            <div class="pad20" style="padding-left: 5%;">-->
<!--              <p class="ft-orange">系统于15:46取消订单, 取消理由: 超时未支付</p>-->
<!--              <p class="ft-bold600 mar-t10">配送信息</p>-->
<!--              <div class="ft-grey8 line-hei-18">-->
<!--                <p>配送方式： 华莱士（龙江花园店）提供配送服务</p>-->
<!--                <p>送达时间： 尽快送出</p>-->
<!--                <p>联 系 人： 陈 先生</p>-->
<!--                <p>联系电话： 15023633003</p>-->
<!--                <p>收货地址： 西南大学天生路2号 维修中心</p>-->
<!--                <p>备 注： 无备注</p>-->
<!--              </div>-->
<!--            </div>-->
<!--          </td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--          <td colspan="6" style="padding: 0; margin: 0;">-->
<!--            <div class="ft12 bg-grey btn-fold center-block" data-toggle="collapse" data-target="#demo-2">-->
<!--              <p class="icon-down">显示订单详情&nbsp;&nbsp;<img src="../../static/img/icon-up01.png" width="9" height="6"-->
<!--                                                          alt=""/></p>-->
<!--              <p class="icon-up" style="display: none">收起&nbsp;&nbsp;<img src="../../static/img/icon-down.png" width="9"-->
<!--                                                                          height="6" alt=""/></p>-->
<!--            </div>-->
<!--          </td>-->
<!--        </tr>-->
        </tbody>
      </table>


      <p class="hei50">&nbsp;</p>
      <!--footer-->
      <footer class="line text-center ft-grey6 ft12">
        <p class="mar-t10 mar-b20">版权所有：西南大学资产经营公司 (渝ICP 06005063号) 重庆市北碚区天生路2号 邮编：400715 </p>
      </footer>
    </div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">添加新地址</h4>
          </div>
          <div class="modal-body form-horizontal pad10-20">
            <div class="form-group">
              <label class="col-sm-2 control-label">联系人</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" placeholder="请输入姓名">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label"></label>
              <div class="col-sm-10">
                <input type="radio"> 先生
                &nbsp;&nbsp;&nbsp;&nbsp;<input type="radio"> 女士
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">手机号码</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" placeholder="请输入11位手机号码">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">收餐地址</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" placeholder="学校/小区/街道">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">详细地址</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" placeholder="您可以填写门牌号码，宿舍楼等信息">
              </div>
            </div>
            <p class="clearfix"></p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" style="padding: 5px 30px">关闭</button>
            <button type="button" class="btn bg-orange" style="padding: 5px 30px">保存</button>
          </div>



        </div><!-- /.modal-content -->
      </div><!-- /.modal -->


    </div>

    <el-dialog
      title="提示"
      :visible.sync="commentVisible"
      width="30%"
      >
        <span>
          <el-form ref="form" :model="commentForm" label-width="80px">
             <el-form-item label="商家评分">
               <el-rate style="margin-top: 11px" allow-half="true" v-model="commentForm.storeScore"></el-rate>
             </el-form-item>
             <el-form-item label="菜品评分">
               <el-rate style="margin-top: 11px" allow-half="true" v-model="commentForm.foodScore"></el-rate>
             </el-form-item>
             <el-form-item label="配送评分">
               <el-rate style="margin-top: 11px" allow-half="true" v-model="commentForm.dhpScore"></el-rate>
             </el-form-item>
            <el-form-item label="评价内容">
               <el-input v-model="commentForm.context"></el-input>
             </el-form-item>
            <el-form-item label="上传图片">
               <el-upload
                 ref="upload"
                 action="http://localhost:8080/commentInfo/uploadImg"
                 list-type="picture-card"
                 :data="orderIdForm"
                 :multiple="true"
                 :on-preview="handlePreview"
                 :on-remove="handleRemove"

                 :file-list="fileList"
                 :auto-upload="false"
               >
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          <img
            class="el-upload-list__item-thumbnail"
            :src="file.url" alt=""
          >
          <span class="el-upload-list__item-actions">
             <span
               class="el-upload-list__item-preview"
               @click="handlePictureCardPreview(file)"
             >
               <i class="el-icon-zoom-in"></i>
             </span>

        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
           </span>
            </span>
        </div>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
            </el-form-item>
          </el-form>
        </span>
      <span slot="footer" class="dialog-footer">
         <el-button @click="commentVisible = false">取 消</el-button>
         <el-button type="primary" @click="submitUpload">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
  export default {
    name: "OrderRecord",
    data() {
      return {
        orderIdForm:{
          orderId:"1"
        },
        fileList:[],
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        commentVisible: false,
        commentForm: {
          orderId:"1",
          storeScore: "",
          foodScore: "",
          dhpScore: "",
          context:""
        },
        orderRecord:{
          records:[
            {
              orderDate:"",
              orderNum:"234",
              storeId:"",
              storeName:"",
              receiveName:"",
              foodPhoto:"../../static/img/img-temp01.png",
              price:"",
              state:"",
              foodsData:{
                foods:[
                  {
                    foodDesc:"",
                    foodName:"",
                    foodId:"",
                    count:"",
                    price:""
                  },
                  {
                    foodDesc:"",
                    foodName:"",
                    foodId:"",
                    count:"",
                    price:""
                  }
                ],
                packCost:"",
                deliveryCost:""

              },
              dispatching:"",
              phone:"",
              address:"",
              remarks:""
            },
            {
              orderDate:"",
              orderNum:"235",
              storeId:"",
              storeName:"",
              receiveName:"",
              foodPhoto:"../../static/img/img-temp01.png",
              price:"",
              state:"",
              foodsData:{
                foods:[
                  {
                    foodDesc:"",
                    foodName:"",
                    foodId:"",
                    count:"",
                    price:""
                  },
                  {
                    foodDesc:"",
                    foodName:"",
                    foodId:"",
                    count:"",
                    price:""
                  }
                ],
                packCost:"",
                deliveryCost:""

              },
              dispatching:"",
              phone:"",
              address:"",
              remarks:""
            }
          ]
        }
      }
    },
    methods: {
      commentOpen(id){
        this.commentVisible=true;
        this.commentForm.orderId=id;
        this.orderIdForm.orderId=id;
      },
      displayFood(id,e){

        let dom=e.target;
        dom.style="display:none";
        dom.nextSibling.nextSibling.style="display:block";

        for(let d of document.getElementsByClassName("food")){
          if(d.getAttribute("orderNum")==id){
            d.classList.remove("collapse");
          }
        }
      },
      hiddenFood(id,e){

        let dom=e.target;
        dom.style="display:none";
        dom.previousSibling.previousSibling.style="display:block";

        for(let d of document.getElementsByClassName("food")){
          if(d.getAttribute("orderNum")==id){
            d.classList.add("collapse");
          }
        }
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      submitUpload(){

        this.$http.post("/commentInfo/addComment",this.commentForm).then(resp=>{
          if(resp.data.code==200){
            this.$refs.upload.submit();
            this.$message({
              showClose: true,
              message: resp.data.message,
              type: 'success'
            });
            this.commentVisible=false;
          }
        })
      },
      getAllOrder(pageSize,pageNum){
        this.$http.get("/dietOrder/getAllOrder",{
          params:{
            pageSize:pageSize,
            pageNum:pageNum
          }
        }).then(resp=>{
          this.orderRecord=resp.data.data;
        })
      }
    },
    created() {
      this.getAllOrder(20,1);
    }

  }
</script>

<style>


  .el-upload-list--picture-card .el-upload-list__item {
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 70px;
    height: 70px;
    margin: 0 8px 8px 0;
    display: inline-block;
  }

  .el-upload--picture-card {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 70px;
    height: 70px;
    cursor: pointer;
    line-height: 146px;
    vertical-align: top;
    line-height: 70px;
  }
  .el-upload--picture-card i {
    font-size: 13px;
    color: #8c939d;
  }
</style>
